<template>
  <a-layout-sider
    collapsible
    :collapsed="collapsed"
    :trigger="null"
    :theme="theme"
    :style="{
      overflow: 'auto',
      height: '100vh',
    }"
  >
    <div class="logo primary_color">Logo</div>
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      :theme="theme"
      @click="handleMenuClick"
    >
      <template v-for="item in asyncRoutes">
        <!-- home page 一级 -->
        <template v-if="item.path === '/'">
          <a-menu-item :key="'/' + item.children[0].path">
            <span class="anticon">
              <i class="iconfont" :class="item.children[0].meta.icon"></i>
            </span>
            <span> {{ $t("menu." + item.children[0].meta.enName) }} </span>
          </a-menu-item>
        </template>
        <!--  -->
        <template v-else>
          <a-sub-menu :key="item.path">
            <template #title>
              <span class="anticon">
                <i class="iconfont" :class="item.meta.icon"></i>
              </span>
              <span> {{ $t("menu." + item.meta.enName) }} </span>
            </template>
            <a-menu-item
              :key="item.path + '/' + sItem.path"
              v-for="sItem in item.children"
            >
              <span> {{ $t("menu." + sItem.meta.enName) }} </span>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  onBeforeUnmount,
  reactive,
  watch,
  ref,
  watchEffect,
  ComponentInternalInstance,
  getCurrentInstance,
} from "vue";
import { UserOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";

export default defineComponent({
  name: "Sidebar",
  props: {},
  data() {
    return {};
  },
  components: {},
  setup(props) {
    const { getters } = useStore();
    const $route = useRoute();
    const $router = useRouter();
    let openKeys = ref([""]);
    let preOpenKeys = ref([""]);
    let selectedKeys = ref([""]);
    let collapsed = ref(false);
    // proxy same as this
    const { proxy } = getCurrentInstance() as ComponentInternalInstance; // or const proxy = getCurrentInstance()?.proxy;

    // theme
    const theme = ref("dark");
    const themeMode = Object.entries(getters.setting.themeMode as {[key: string]: string});

    // 监听
    watchEffect(() => {
      // menu
      try {
        openKeys.value = [$route.matched[0].path];
        selectedKeys.value = [$route.path];
      } catch (error) {
        throw new Error(error);
      }
    });
    watch(openKeys, (val, oldVal) => {
      preOpenKeys.value = oldVal;
    });
    //

    const asyncRoutes = getters.routes.filter((item: any) => {
      return !item.meta.hidden || item.meta.hidden === "false";
    });

    //
    const handleMenuClick = (nodes: any): void => {
      const { item, key, keyPath } = nodes;
      $router.push({ path: key });
    };

    // collapse
    proxy?.$eventBus.$on("sideCollapsed", (res: boolean) => {
      collapsed.value = res;
      openKeys.value = collapsed.value ? [] : preOpenKeys.value;
    });

    // menu theme
    proxy?.$eventBus.$on("setMenuTheme", (res: number) => {
      const inx = res === 2 ? 0 : res;
      theme.value = themeMode[inx][1];
    });

    onBeforeUnmount(() => {
      proxy?.$eventBus.$off("sideCollapsed", () => {});
      proxy?.$eventBus.$off("setMenuTheme", () => {});
    });

    return {
      asyncRoutes,
      selectedKeys,
      handleMenuClick,
      openKeys,
      collapsed,
      theme,
      themeMode
    };
  },
});
</script>

<style lang="scss" scoped>
.logo {
  height: 32px;
  line-height: 32px;
  background: hsla(0, 0%, 100%, 0.2);
  margin: 16px;
  font-weight: 600;
}
.ant-layout-sider {
  @include scrollBar(transparent, true);
  .ant-menu {
    text-align: left;
    .anticon,
    .anticon + span {
      display: inline-block;
      vertical-align: middle;
    }
    .iconfont {
      font-size: 14px;
    }
  }
}
</style>